<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>诉求管理</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap_fileupload/css/fileinput.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/sweet-alert.css">
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field="releaseName">发布人姓名</th>
							<th class="text-center" data-field="releaseTime">发布时间</th>
							<th class="text-center" data-field="releaseState">状态</th>
							<th class="text-center" data-field="s1">转工单</th>
							<th class="text-center" data-field="id">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
	<!-- Large modal -->
	<div id="modal" class="modal fade bs-example-modal-lg" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">反馈窗口</h4>
				</div>
				<div class="modal-body">
					<div class="input-group">
						<span class="input-group-addon">反馈人</span> <input type="text" class="form-control" value="${sessionScope.userAccount}" id="feedback_name" readonly="readonly">
					</div>
					<br />
					<div class="input-group">
						<span class="input-group-addon">备注</span> <input type="text" class="form-control" id="remark">
					</div>
					<br />
					<br /> <br style="display: none;" id="jj2" />
					<div class="input-group">
						<span class="input-group-addon">内容</span>
						<textarea style="width: 100%; height: 500px;" class="form-control" rows="30" id="column1_textarea" name="kindEditor_content"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button id="hang" type="button" class="btn btn-warning" onclick="hang();">挂起</button>
					<button id="complete" type="button" class="btn btn-success" onclick="complete();">完成</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!--详情  -->
		<div id="modal2" class="modal fade bs-example-modal-lg" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">详情窗口</h4>
				</div>
				<div class="modal-body">
					<!-- <div>
						<button class='btn btn-warning btn-ms glyphicon glyphicon-pencil' onclick="showModal(id)">反馈</button>
					</div> -->
					<div>
						<span class="input-group-addon">诉求内容</span>
						<textarea class="form-control" rows="5" id="release_content" readonly></textarea>
					</div>
					<br />
					<div id="releaseImg" style="height:300px">
						<!-- <img id="releaseImg" src="" class="img-responsive" alt="Responsive image">  -->
					</div>
					<br />
				</div>
			</div>
		</div>
	</div>
	
	<div id="WOmodal" class="modal fade bs-example-modal-lg" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">编辑窗口</h4>
				</div>
				<div class="modal-body">
					<div class="input-group">
						<input type="hidden" class="form-control"  id="work_order_releaseId" >
						<span class="input-group-addon">工单标题</span> <input type="text" class="form-control" placeholder="必填" id="title">
					</div>
					<br />
					<div class="input-group">
						<span class="input-group-addon">操作人</span> <input type="text" class="form-control" value="${sessionScope.userAccount}" id="name" disabled="disabled" >
					</div>
					<br />
					<div class="input-group">
						<span class="input-group-addon">责任人</span> <input type="text" class="form-control" placeholder="必填" id="people" >
					</div>
					<br /> <br style="display: none;" id="jj2" />
					<div >
						<span class="input-group-addon">工单内容</span>
						<textarea style="width: 100%; height: 500px;" class="form-control" rows="30" id="workOrder" name="workOrder"></textarea> 
					</div>
				</div>
				<div class="modal-footer">
					<button  id="submit" type="button" class="btn btn-success" onclick="submitWO();">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<!-- kindeditor 编辑器 -->
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>

<%-- <script charset="utf-8" src="${pageContext.request.contextPath}/plugins/bootstrap_fileupload/js/fileinput.min.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/plugins/bootstrap_fileupload/js/locales/zh.js"></script> --%>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/js/sweet-alert.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
<script>

	var oldNoticeImg;
	var appealId = "";
	var isChecked = true;
	var editor;
	var historyRelease;
	var state;
	var wo;
	
	var options={
			items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter',
						'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|',
						'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
						'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ], //配置kindeditor编辑器的工具栏菜单项
				cssPath : 'kindeditor-4.1.10/plugins/code/prettify.css',
				allowFileManager : true,
				uploadJson : '${pageContext.request.contextPath}/upload_img.do', //上传
				extraFileUploadParams : {
					mienId : ''
	        	},
				filterMode : true, //是否启用过滤模式(编辑文本框中是否可以出现控件显示)
				htmlTags : {
					span : [ '.color', '.background-color', '.font-size', '.font-family', '.background', '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height' ],
					font : [ 'id', 'class', 'color', 'size', 'face', '.background-color' ],
					a : [ 'id', 'class', 'href', 'target', 'name' ],
					embed : [ 'id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess' ],
					img : [ 'id', 'class', 'src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border' ],
					'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [ 'id', 'class', 'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background', '.font-weight',
							'.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left' ],
					pre : [ 'id', 'class' ],
					hr : [ 'id', 'class', '.page-break-after' ],
					'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : [ 'id', 'class' ],
					iframe : [ 'id', 'class', 'src', 'frameborder', 'width', 'height', '.width', '.height' ]
				},
				allowFileManager : true,
				allowUpload : true, //允许上传图片
				imageUploadJson : '/saveImg', //服务端上传图片处理URI
				resizeType : 0,//使其不可以拖动 
				/* afterCreate : function() {
					 var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
					}); 
				}, */
				afterBlur : function() {
					this.sync();
				}
			}
	
	
	var table_dataset = [ {
		field : 'releaseName',
		align : 'center',
	}, {
		field : 'createTime',
		align : 'center',
		formatter : function timeFormatter(value, row, index) {
			return (new Date(row.createTime)).Format("yyyy-MM-dd hh:mm:ss");
		}
	},{
		field : 'releaseState',
		align : 'center',
		formatter : stateFormatter,
	},{
		field : 's1',
		align : 'center',
		formatter : s1Formatter,
	},{
		align : 'center',
		width :500,
		formatter : actionFormatter,
	} ];
	$('#table').bootstrapTable({
		url : "${pageContext.request.contextPath}/release/selectReleasePage",
		idField : "id",
		columns : table_dataset,
		striped : true, //是否显示行间隔色
		pagination : true, //是否显示分页
		pageSize : 10, //每页的记录行数
		pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
		search : false, //是否显示搜索
		showRefresh : true,
		sidePagination : "server", //表示服务端请求  
		queryParamsType : "limit",
		queryParams : function queryParams(params) { //设置查询参数  
			var param = {
				offset : params.offset,
				limit : params.limit,
				kod	  : $("#kod").val()
			};
			return param;
		},
		toolbar :"<div class='input-group' style='width:250px;float:right;margin-top:2px;margin-left:2px;'><input type='text' class='form-control' placeholder='请输入发布人姓名或账号' id='kod' name='kod'>"
		+ "<span class='input-group-btn'><button class='btn btn-default' type='button' onclick='Querry(\"" + '' + "\");'>查询</button></span></div>",
		icons : {
			paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
			paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
			refresh : 'glyphicon-refresh icon-refresh',
			toggle : 'glyphicon-list-alt icon-list-alt',
			columns : 'glyphicon-th icon-th',
			detailOpen : 'glyphicon-plus icon-plus',
			detailClose : 'glyphicon-minus icon-minus',
			"export" : 'glyphicon-export icon-share'
		},
		showExport : true,
		exportDataType : 'basic',
		exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql', 'excel' ]
	});
	
	
	KindEditor.ready(function(K) {
		historyRelease = K.create('textarea[name="historyRelease"]', options);
	});
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="kindEditor_content"]', options);
	});  

	
	function actionFormatter(value, row, index) {
		//console.log(row.releaseState);
		if(row.releaseState==1 || row.releaseState==2){
			return ["<button class='btn btn-primary btn-xs glyphicon glyphicon-list-alt' onclick='showModal2(\"" + row.appealId + "\");'>详情</button>",
			         "&nbsp;<button class='btn btn-info btn-xs glyphicon glyphicon-pencil' onclick='showModal(\"" + row.appealId+ "\",\""+row.releaseState+ "\");'>反馈</button>",
					//"&nbsp;<button class='btn btn-danger btn-xs glyphicon glyphicon-trash' onclick='delNotice(\"" + row.appealId+"\")'>删除</button>"
					].join('');
		}else{
			return ["<button class='btn btn-primary btn-xs glyphicon glyphicon-list-alt' onclick='showModal2(\"" + row.appealId + "\");'>详情</button>",
			         "&nbsp;<button class='btn btn-info btn-xs glyphicon glyphicon-pencil' onclick='showModal(\"" + row.appealId + "\",\""+row.releaseState+ "\");'>查看反馈</button>",
					//"&nbsp;<button class='btn btn-danger btn-xs glyphicon glyphicon-trash' onclick='delNotice(\"" + row.appealId+"\")'>删除</button>"
					].join('');
		}	
	}
	
	function s1Formatter(value, row, index) {
		//console.log(row.releaseState);
		if(row.s1==0 ){
			return ["&nbsp;<button class='btn btn-warning btn-xs glyphicon glyphicon-arrow-right' onclick='showWO(\"" + row.appealId + "\");'>转工单</button>", ].join('');
		}else{
			return ["&nbsp;<button class='btn btn-warning btn-xs glyphicon glyphicon-arrow-right' disabled='disabled' onclick='showWO(\"" + '' + "\");'>已转工单</button>", ].join('');
		}	
	}
	
	function stateFormatter(value,row,index){
		if(row.releaseState==1){
			return [ "<div class='text-muted'>待处理</div>"].join('');
		}else if(row.releaseState==2){
			return [ "<div class='text-primary'>处理中</div>"].join('');
		}else if(row.releaseState==3){
			return [ "<div class='text-danger'>挂起</div>"].join('');
		}else if(row.releaseState==4){
			return [ "<div class='text-success'>完成</div>",].join('');
		}
	}
	
	function showModal2(id,state){
		//console.log(id);
		appealId=id;
		state=state;
		$.ajax({
			url : "${pageContext.request.contextPath}/release/selectById",
			type : "get",
			data : {
				appealId : id
			},
			dataType : "json",
			success : function(data) {
				var release=data.release;
				var releaseImgs = "";
				if(release.releaseImg!=null){
				   releaseImgs=release.releaseImg.split("★");
				}
				var img="";
				//console.log(window.location.host);
				if(releaseImgs!=""){
					for (var i = 0; i < releaseImgs.length; i++) {
						//console.log(releaseImgs[i]);
						img += "<img class='cover-radius' src='http://"+window.location.host+"/upload/zhsq_xg/"+releaseImgs[i] +"' width='25%;' height='100%;' style='cursor: pointer;'>"
					}
					$("#releaseImg").show();
					$("#releaseImg").html(img);
				}else{
					$("#releaseImg").hide();
				}
				$("#release_content").html(release.releaseContent);
				//$("#releaseImg").attr("src","${pageContext.request.contextPath}"+release.releaseImg);
				$("#table").bootstrapTable('refresh');
				$('#modal2').modal({
					backdrop : 'static',
					keyboard : false
				});
			},
			error : function() {
				layer.msg('系统异常!', {
					icon : 2,
					time : 800
				});
			}
		});
	}
	
	
	function showModal(id,state) {//反馈
		//console.log(state);
		appealId=id;
		$("#hang").show();
		$("#complete").show();
		$("#feedback_name").parent().show();
		$("#remark").parent().show();
		if(state=="3"){
			$("#hang").hide();
			$("#complete").show();
		}
		if(state=="4"){
			$("#hang").hide();
			$("#complete").hide();
		}
		
		if(state==3 || state==4){
			$("#feedback_name").parent().hide();
			$("#remark").parent().hide();
		}
		
		editor.html('');
		options.extraFileUploadParams = {folderId : id};
		
			$.ajax({
				url : "${pageContext.request.contextPath}/release/selectById",
				type : "get",
				data : {
					appealId : id
				},
				dataType : "json",
				success : function(data) {
				 var release=data.release;
					//console.log(release);
					/*if(release.s1!=null||release.s2!=null){
						historyRelease.insertHtml(release.s1+release.s2);
						
					} */
					editor.html(release.feedbackContent)
					$('#modal').modal({
						backdrop : 'static',
						keyboard : false
					});
				},
				error : function() {
					layer.msg('系统异常!', {
						icon : 2,
						time : 800
					});
				}
			});
	}
	
	var workOrder=guid();
	KindEditor.ready(function(K) {
		wo = K.create('textarea[name="workOrder"]', options);
	}); 
	function showWO(appealId){
		options.extraFileUploadParams = {folderId : workOrder};
		//console.log(options);
		wo.html('');
		$('#work_order_releaseId').val(appealId);
		$('#title').val('');
		$("#people").val('');
		$('#WOmodal').modal({
			backdrop : 'static',
			keyboard : false
		});
			
	}
	
	function submitWO(){
		
		var workOrderTitle = $('#title').val();
		var workOrderName = $('#name').val();
		var workOrderPeople =$("#people").val();
		var workOrderContent = $('#workOrder').val();
		var workOrderReleaseid=$('#work_order_releaseId').val();
		if(workOrderTitle==""){
			layer.msg('请填写主题!', {
					icon : 2,
					time : 800
				});
			return;
		}
		
		if(workOrderPeople==""){
			layer.msg('请填写责任人!', {
				icon : 2,
				time : 800
			});
			return;
		}
		
		if(workOrderContent==""){
			layer.msg('请填写工单内容!', {
				icon : 2,
				time : 800
			});
			return;
		}
		$.ajax({
   			url : "${pageContext.request.contextPath}/work_order/insertWorkOrder",
   			type : "post",
   			dataType : "json",
   			data : {
   				workOrderId:workOrder,
   				workOrderTitle : workOrderTitle,
   				workOrderName : workOrderName,
   				workOrderPeople : workOrderPeople,
   				workOrderContent : workOrderContent,
   				workOrderReleaseid:workOrderReleaseid
   			},
   			success : function(data) {
   				var result = data['result'];
   				if (result =="1") {
   					layer.msg('操作成功!', {
   						icon : 1,
   						time : 800
   					});
   					setTimeout(function() {
   						$("#table").bootstrapTable('refresh');
   						$("#WOmodal").modal("hide");
   					}, 1000);
   				} else {
   					layer.msg('操作失败!', {
   						icon : 2,
   						time : 800
   					});
   				}
   			},
   			error : function() {
   				layer.msg('系统繁忙，请稍后再试!', {
   					icon : 2,
   					time : 800
   				});
   			}
   		});
	}


	function hang() {
		var feedbackName = $('#feedback_name').val();
		var remark = $('#remark').val();
		var feedbackContent = $('#column1_textarea').val();
		//console.log(state);
		
	      	 $.ajax({
	   			url : "${pageContext.request.contextPath}/release/updateRelease",
	   			type : "post",
	   			dataType : "json",
	   			data : {
	   				appealId:appealId,
	   				feedbackName : feedbackName,
	   				remark : remark,
	   				feedbackContent : feedbackContent,
	   				//s1:feedbackContent,
	   				releaseState:"3"
	   			},
	   			success : function(data) {
	   				var result = data['result'];
	   				if (result =="1") {
	   					layer.msg('操作成功!', {
	   						icon : 1,
	   						time : 800
	   					});
	   					setTimeout(function() {
	   						$("#table").bootstrapTable('refresh');
	   						$("#modal").modal("hide");
	   					}, 1000);
	   				} else {
	   					layer.msg('操作失败!', {
	   						icon : 2,
	   						time : 800
	   					});
	   				}
	   			},
	   			error : function() {
	   				layer.msg('系统繁忙，请稍后再试!', {
	   					icon : 2,
	   					time : 800
	   				});
	   			}
	   		});
	}
	
	function complete() {
		var feedbackName = $('#feedback_name').val();
		var remark = $('#remark').val();
		var feedbackContent = $('#column1_textarea').val();
		//console.log(releaseState);
		/* if(noticeTitle==""){
			swal("友情提示", "请填写标题！", "warning");
			return;
		} */
	      	 $.ajax({
	   			url : "${pageContext.request.contextPath}/release/updateRelease",
	   			type : "post",
	   			dataType : "json",
	   			data : {
	   				appealId:appealId,
	   				feedbackName : feedbackName,
	   				remark : remark,
	   				feedbackContent : feedbackContent,
	   				//s2:feedbackContent,
	   				releaseState:"4"
	   			},
	   			success : function(data) {
	   				var result = data['result'];
	   				if (result =="1") {
	   					layer.msg('操作成功!', {
	   						icon : 1,
	   						time : 800
	   					});
	   					setTimeout(function() {
	   						$("#table").bootstrapTable('refresh');
	   						$("#modal").modal("hide");
	   					}, 1000);
	   				} else {
	   					layer.msg('操作失败!', {
	   						icon : 2,
	   						time : 800
	   					});
	   				}
	   			},
	   			error : function() {
	   				layer.msg('系统繁忙，请稍后再试!', {
	   					icon : 2,
	   					time : 800
	   				});
	   			}
	   		});
	}

 /* 	function delNotice(id) {
		layer.confirm("是否要删除此诉求？", function(index) {
			$.ajax({
				url : "${pageContext.request.contextPath}/release/deleteRelease",
				type : "post",
				data : {
					appealId : id
				},
				dataType : "json",
				success : function(data) {
					if (data.result == "1") {
						layer.msg('操作成功!', {
							icon : 1,
							time : 800
						});
						setTimeout(function() {
							$("#table").bootstrapTable('refresh');
						}, 500);
					} else {
						layer.msg('操作失败!', {
							icon : 2,
							time : 800
						});
					}
				},
				error : function() {
					layer.msg('系统繁忙，请稍后再试!', {
						icon : 5,
						time : 800
					});
				}
			});
		});
	} */
	
	function fileChange() {
        document.getElementById("upload_file_img").value = document.getElementById("titleImg").value;
    }
	 function guid() {
	        function S4() {
	           return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
	        }
	        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
	    }
	 function Querry(){
		 $("#table").bootstrapTable('refresh');
	}
	
	
</script>
</html>
